<template>
<div>
  <div class="constellation"><span @click="back"><van-icon name="arrow-left" />返回</span>随机生成新壁纸 </div>
  <div class="top" @click="getNewBZ">换一批<br><img src="https://p5.itc.cn/q_70/images03/20210303/e8177902e4b4449481a711faabde9519.jpeg" alt=""></div>

  <ul>
    <a-spin tip="Loading..." v-for="item in 10" :key="item" v-show="isShow">
      <div class="spin-content">
        图片加载中
      </div>
    </a-spin>
    <li v-for="item in wallpaperList" :key="item.id"><img :src="item.url" alt="" v-show="!isShow"></li>
  </ul>
</div>
</template>

<script>
import {getWallpaper} from "@/http/api";

export default {
name: "Wallpaper",
  data() {
  return {
    wallpaperList:[],
    isShow:true,
  }
  },
  methods:{
    getNewBZ() {
      this.isShow = true
      getWallpaper().then(res => {
        if(res.data.code == 200) {
          this.isShow = false
          this.wallpaperList = res.data.result.list
        }
      })
    },
    back() {
      this.$router.go(-1)
    },
  },
  created() {
    //随机生成壁纸
    getWallpaper().then(res => {
      this.isShow = true
      if(res.data.code == 200) {
        this.isShow = false
        this.wallpaperList = res.data.result.list
      }

    })
  }
}
</script>

<style scoped lang="less">
.constellation{
  color: white;
  padding: 20px 0;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  background-image: url('../assets/背景.jpg');
  position: relative;
  >span {
    position: absolute;
    left: 15px;
    top:22px;
    font-size: 18px;
  }
}
.top {
  position: fixed;
  right: 20px;
  top: 150px;
  background-color: white;
  color: black;
  >img {
    width: 40px;
    height: 40px;
  }
}
ul {
  padding: 10px;
  img {
    width: 100%;
    margin: 10px 0;
  }
}

.spin-content {
  margin: 10px ;
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  padding: 100px 30px;
}
</style>